<template>
    <Index :type='2'>
        <div>
            <a-input placeholder='手机号码' size='large' v-model:value='formData.username' @focus='focus'>
                <template #prefix><UserOutlined :class='$style.inputprefix' /></template>
            </a-input>
        </div>
        <div class='m-t-30'>
            <a-input placeholder='设置密码' type='password' size='large' v-model:value='formData.password' @focus='focus'>
                <template #prefix><LockOutlined :class='$style.inputprefix' /></template>
            </a-input>
        </div>
        <div class='m-t-30'>
            <a-input placeholder='确认密码' type='password' size='large' v-model:value='formData.repassword' @focus='focus'>
                <template #prefix><LockOutlined :class='$style.inputprefix' /></template>
            </a-input>
        </div>
        <div class='m-t-30 flex-align-items-center'>
            <div class='flex-1'>
                <a-input placeholder='验证码' size='large' v-model:value='formData.captcha' @focus='focus'>
                    <template #prefix><MailOutlined :class='$style.inputprefix' /></template>
                </a-input>
            </div>
            <div class='m-l-15'>
                <a-button type='default' size='large' :disabled='waitting' :loading='sending' @click='getCaptcha'>{{waitting ? `${second}秒重新获取` : '获取验证码'}}</a-button>
            </div>
        </div>
        <div v-show='showError' class='m-t-20'>
            <a-alert :message='errorMsg' type='warning' show-icon />
        </div>
        <div class='m-t-30'>
            <a-button type='primary' size='large' block :loading='loading' @click='login'>注 册</a-button>
        </div>
    </Index>
</template>


<script lang='ts' setup>
    import Index from './index.vue'
    import { UserOutlined, LockOutlined, MailOutlined } from '@ant-design/icons-vue';
    import { reactive, ref } from '@vue/reactivity';
    import { registerApi, captchaApi } from '@/api/login'
    import { verifyMobile } from '@/utils'
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
    

    const $router = useRouter()

    const loading = ref(false)
    const showError = ref(false)
    const errorMsg = ref('')

    const formData = reactive({
        username : '',
        password : '',
        repassword : '',
        type : 'account',
        captcha : ''
    })

    function focus() {
        showError.value = false
    }

    const waitting = ref(false)
    const second = ref(60)
    const sending = ref(false)

    async function getCaptcha() {
        if(formData.username === '') {
            errorMsg.value = '请填写手机号码'
            showError.value = true
            return
        }

        if(!verifyMobile(formData.username)) {
            errorMsg.value = '手机号码不正确'
            showError.value = true
            return
        }

        sending.value = true
        const res = await captchaApi(formData.username)
        sending.value = false
        if(res.success) {
            second.value = 60
            const t = setInterval(() => {
                second.value --
                if(second.value == 0) {
                    clearInterval(t)
                    waitting.value = false
                }
            }, 1000)
            waitting.value = true
        }else {
            errorMsg.value = res.message
            showError.value = true
        }
    }

    async function login() {
        if(formData.username === '') {
            errorMsg.value = '请填写手机号码'
            showError.value = true
            return
        }

        if(formData.password === '') {
            errorMsg.value = '请设置密码'
            showError.value = true
            return
        }

        if(formData.password.length < 6) {
            errorMsg.value = '登录密码至少6位'
            showError.value = true
            return
        }

        if(formData.repassword === '') {
            errorMsg.value = '请确认密码'
            showError.value = true
            return
        }

        if(formData.repassword !== formData.password) {
            errorMsg.value = '两次密码不一致'
            showError.value = true
            return
        }

        if(!verifyMobile(formData.username)) {
            errorMsg.value = '手机号码不正确'
            showError.value = true
            return
        }

        if(formData.captcha === '') {
            errorMsg.value = '请填写短信验证码'
            showError.value = true
            return
        }

        
        loading.value = true
        let data = {...formData, mobile : formData.username}
        delete data.repassword
        const res = await registerApi(data)
        loading.value = false
        if(res.success) {
            message.success('注册成功')
            $router.replace('/login?mobile=' + formData.username)
        }else {
            errorMsg.value = res.message
            showError.value = true
        }

    }

</script>

<style module lang='scss' src='./style.scss'></style>